body {
	background-image: url('../images/bg3.png');
	background-position:center;
	background-attachment: fixed;
	background-color: #f9c88e;
	border-color: #f9c88e;
	font-family: Calibri, Serif;
}

div {
	border-color: #f9c88e;
}

span {
	border-width: 1px;
	border-style: solid;
	border-color:black;
}

#wrapper {
	background-color: #f9c88e;
	text-align: center;
	width: 800px;
	margin: 40px 250px;
}

#header {
	background-color: #f9c88e;
}


#join{
	width:150px;
	height:70px;
	margin-top:60px;
	margin-left:380px;
}

#join img{
	width:86%;
	height:80%;
}

#theme{
	float:left;
	margin : -120px 0 20px 500px;
}

#theme1{
	background-color:#f6f921;
	float:left;
	width:18px;
	height:18px;
	margin : -120px 0 0 565px;
}

#theme1:hover{
	background-color:#f921ce;
	cursor:pointer;
}

#theme1:active{
	background-color:#2799cf;
}

#theme2{
	background-color:#f6f921;
	float:left;
	width:18px;
	height:18px;
	margin : -120px 0 0 595px;
}

#theme2:hover{
	background-color:#f921ce;
	cursor:pointer;
}

#theme2:active{
	background-color:#2799cf;
}

#theme3{
	background-color:#f6f921;
	float:left;
	width:18px;
	height:18px;
	margin : -120px 0 0 625px;
}

#theme3:hover{
	background-color:#f921ce;
	cursor:pointer;
}

#theme3:active{
	background-color:#2799cf;
}

#login {
	background-color:black;
	float: right;
	height: 100px;
	width:160px;
	text-align:right;
	margin-right:0px;
	color:white;
}

#login img{
	max-width:200px;
	max-height:100px;
}

#showimg img{
	max-width:500px;
	max-height:300px;
}

#login a{
	color:white;
	float:left;
	text-align:right;
	margin-right:5px;
	margin-left:15px;
	margin-top:5px;
}

#login a{
	color:white;
	float:left;
	text-align:right;
	margin-right:5px;
	margin-left:15px;
	margin-top:5px;
}

#login input[type="text"]{
	height: 15px;
	margin-right:5px;
}

#login input[type="password"]{
	height: 15px;
	margin-right:5px;
}

#login input[type="button"]{
	text-align:right;
	margin-left:11px;
}

#avatar{
	width:50px;
	height: 100px;
}

#avatar img{
	width:100%;
	height:100%;
}

#sign_in {
	float:left;
	width:50px;
	height:13px;
}

#sign_in img{
	width:100%;
	height:100%;
}

#sign_in:hover{
	/*margin-top:-1px;*/
	cursor:pointer;
}

#sign_up{
	color:blue;
}

#sign_up:hover{
	cursor:pointer;
	color:black;
}

#loginerror {
	color:red;
	text-align:right;
	margin-right:12px;
}

.logo {
	width: 140px;
	float: left;
	height: 90px;
}

.logo img{
	width:105%;
	height:170%;
	margin: -35px 0 0 0px;	
}


.searchbox{
	float:left;
	background-color:#f9c88e;
	width: 250px;
	height: 144px;
	margin-top:0px;
	margin-left:0px;
	border-style:dotted;
	border-color:black;
}

.title {
	background-image:url('../images/banner OK.png');
	float: left;
	width: 800px;
	height: 150px;
}


#title img{
	height: 100%;
	width: 100%;
	margin: 0 0 0 0;
}


#search {
	background-color: #f9c88e;
	height: 50px;
	width: 70px;
}

#tabs {
	background-color: black;
	float: left;
	width: 500px;
	height: 100px;
	color:white;
}

.tab-home {
	background-color:black;
	float: left;
	width: 100px;
	height: 90px;
}

.tab-home img{
	width: 50%;
	height: 65%;
	margin-top:7px;
}

.tab-home:hover{
	background-color:#e922c1;
	margin-top:5px;
}

.tab-recipe {
	background-color:black;
	float: left;
	width: 100px;
	height: 90px;
}

.tab-recipe img{
	width: 60%;
	height: 65%;
	margin-top:7px;
}

.tab-recipe:hover{
	background-color:#165bce;
	margin-top:5px;
}

.tab-place {
	background-color:black;
	float: left;
	width: 100px;
	height: 90px;
}

.tab-place img{
	width: 60%;
	height: 65%;
	margin-top:7px;
}

.tab-place:hover{
	background-color:#8d1826;
	margin-top:5px;
}

.tab-tips {
	background-color:black;
	float: left;
	width: 100px;
	height: 90px;
}

.tab-tips img{
	width: 60%;
	height: 65%;
	margin-top:7px;
}

.tab-tips:hover{
	background-color:#21960e;
	margin-top:5px;
}

.tab-profile {
	background-color:black;
	float: left;
	width: 100px;
	height: 90px;
}

.tab-profile img{
	width: 60%;
	height: 65%;
	margin-top:7px;
}

.tab-profile:hover{
	background-color:#822ac0;
	margin-top:5px;
}


#quote {
	background-color: #f9c88e;
	height: 40px;
}

#bestpost{
	background-color:black;
	color:white;
	border-style:solid;
	border-color:white;
	float:left;
	width:400px;
	height:20px;
	margin-left:65px;
	margin-top:-20px;
	margin-bottom:-20px;
}

#content {
	background-color: #f9c88e;
	margin-top: 20px;
}

/* main.php */
#preview {
	background-image: url('../images/paper.png');
	background-color: #f9c88e;
	background-repeat: no-repeat;
	background-size:580px 300px;
	float: left;
	width: 580px;
	height: 300px;
}


#poster {
	float: left;
	width: 40%;
	height: 200px;
}

#poster img{
	width:80%;
	height:75%;
}

#poster iframe{
	margin:10px 0 5px 10px;
	width:80%;
	height:75%;
}

#desc {
	margin: 10px 5px 5px 20px;
	float:left;
	text-align:left;
	width : 30%;
	height: 200px;
}

#desc img{
	width:40%;
	height:40%;
}

#ad {
	background-color: #f9c88e;
	float:right;
	width: 220px;
	height: 300px;
}

#ad img{
	width:95%;
	height:80%;
}

#bullet1{
	background-color:#c4c2bf;
	float:left;
	width:25px;
	height:25px;
	margin-top:220px;
	margin-left:-110px;
}

#bullet1:hover{
	background-color:#717272;
	cursor:pointer;
}

#bullet1:active{
	background-color:#2799cf;
}

#bullet2{
	background-color:#c4c2bf;
	float:left;
	width:25px;
	height:25px;
	margin-top:220px;
	margin-left:-80px;
}

#bullet2:hover{
	background-color:#717272;
	cursor:pointer;
}

#bullet2:active{
	background-color:#2799cf;
}

#bullet3{
	background-color:#c4c2bf;
	float:left;
	width:25px;
	height:25px;
	margin-top:220px;
	margin-left:-50px;
}

#bullet3:hover{
	background-color:#717272;
	cursor:pointer;
}

#bullet3:active{
	background-color:#2799cf;
}

#categories {
	width: 520px;
	float: left;
	height: 105px;
}

.category {
	border-style:solid;
	border-color:black;
	margin:10px 10px 10px 10px;
	background-color:#a972fb;
	width: 100px;
	float: left;
	height: 80px;
}

.category img{
	width:55%;
	height:60%;
}

.category img:hover{
	margin-top:5px;
}

#search{
	float:left;
	background-color: #f9c88e;
	border-style:dotted;
	border-color:black;
	width:273px;
	height:75px;
}

#text_Search_Home{
	width:190px;
	margin-left:25px;
	margin-top: 15px;
	float:left;
}

#search_button img{
	width:100%;
	height:100%;
}

#search_button {
	float:left;
	margin-left:15px;
	width:40px;
	height:40px;
}

#toptens {
	width:810px;
	float:left;
}

.topten {
	background-color: #000000;
	color: #ffffff;
	width: 267px;
	float: left;
}

/* daftarkonten.php */
#left_nav {
	margin:10px 5px 5px 16px;
	width: 32%;
	float: left;
}

#contents {
	width: 65%;
	float: right;
}

.single_content {
	background-image : url('../images/paper.png');
	background-repeat : no-repeat;
	font-family: "Lucida Sans Unicode";
	height: 200px;
	width : 100%;
}

.komen_content {
	background-repeat : no-repeat;
	font-family: "Lucida Sans Unicode";
	height: 200px;
	width : 100%;
}

#posterkonten {
	float: left;
	height : 170px;
	width : 45%;
}

#posterkonten img{
	margin:10px 5px 15px 5px;
	width:80%;
	height:80%;
}

#posterkonten iframe{
	margin:10px 5px 15px 5px;
	width:80%;
	height:80%;
}

#desckonten {
	margin: 10px 5px 5px 15px;
	float:left;
	text-align:left;
	width : 40%;
	height: 170px;
}

#desckonten img{
	width:100%;
	height:100%;
}

#artikelkonten {
	margin: 10px 35px 5px 35px;
	float:left;
	text-align:left;
	width : 80%;
	height: 160px;
	font-size: 18px;
}


/*konten*/
#like_dislike {
	margin-left : 30px;
	float :left;
	background-color : #999;
}

/* daftar konten --> like content */
.LikeContent {
background-image : url('../images/arrow.png');
background-repeat : no-repeat;
float: left;
height: 200px;
width : 100%;
}

.LikeContent img {
width : 80px; 
height : 80px; 
margin-top : 15px;
margin-bottom : 0px;
}

.LikeContent_Home {
	float: left;
	height: 50%;
	width : 60%;
}

.LikeContent_Home img {
width : 80px; 
height : 80px; 
}

.likeCount{
margin-bottom : 5px; 
margin-top : 0px; 
font-size : 18px; 
color : white;
border : none;
outline : none;
}

.likeCount_Home{
font-size : 18px; 
color : black;
width:20%;
border : none;
outline : none;
}

/* registrasi.php */
#lblsignup {

}

#formreg {

}

#blank{
	width:400px;
}

#errors {
	text-align:left;
	width: 300px;
	float: right;
	margin-top: -176px;
	margin-right: 55px;
	color: red;
}

#fields {
	text-align:right;
	width: 150px;
	float: left;
}

#fields2 {
	text-align:right;
	width: 150px;
	float: left;
}


#inputs2 {
	text-align: left;
}

#achievement {
	background-color:#f9c88e;
}

#inputs {
	text-align: left;
}

#validations {
	text-align:left;
	float: right;
	width: 300px;
}

.validation {
	color: red;
	font-size: 12px;
	height: 30px;
}

.input_label {
	height: 30px;
}

.input_label2 {
	height: 30px;
}

#input_label_about {
	height: 180px;
}

.input_box {
	height: 30px;
	width:500px;
}

.input_box input[type="button"]{
	float:right;
}

#input_about {
	height: 180px;
}

#footer {
	background-color: #4b3c2b;
	margin-top: 20px;
}

#footertabs {
	background-color: #4b3c2b;
	color: #ffffff;
	float: left;
	width: 801px;
	height: 110px;
}

.footertab {
	float: right;
	width: 110px;
}

.footertab:hover{
	cursor:pointer;
}

.footer_bawah{
	float: left;
}

#social {
	margin:15px 0 0 15px;
	float:left;
	width:160px;
}

#fb{
	float:left;
}

#twitter{
	float:left;
}

#YM{
	float:left;
}

#comments{
	width:800px;
	height:70px;
}

#comments img{
	margin-top :30px;
	width:100%;
	height:100%;
}

.comment_list{
	float:left;
	width:700px;
	height:200px;
	background-color:white;
	border-color:black;
	border-style:dotted;
	margin-bottom:10px;
	margin-left:50px;
}

.avatarkonten {
	float: left;
	height : 170px;
	width : 40%;
}

.avatarkonten img{
	margin:10px 10px 10px 10px;
	width:80%;
	height:100%;
}

.commenkonten {
	margin:10px 10px 10px 10px;
	float:left;
	text-align:left;
	width : 50%;
	height: 170px;
	font-size : 22px;
}

.commenkonten img{
	width:100%;
	height:100%;
}

.mainContent {
margin-left : 30px; 
margin-top :30px;
width: 700px; 
}

/* POST Comment*/
.postComment{
margin-left : 50px; 
width:700px;
}

.commentText{margin-left : 50px; font-size : 20px; font-family : "Eras Bold ITC"; margin-bottom : 20px; margin-top : 50px;}
.comment {
	width : 700px;
	height: 200px;
	margin-left :22px; 
	margin-bottom : 40px; 
	background-color : #FFFFFF;
	border-color:black;
	border-style:dotted;
}


.commentContent {
	float:left;
	font-family : "Comic sans ms"; 
	font-size : 20px; 
	color : #222222;
	margin-left:300px;
}

.commentUser {
	margin-left : 30px;
	font-size : 23px; 
	color : black;
}

.commentTime {
	margin-left : 45px;
	font-size : 20px; 
	color : black;
}

.postText{
	padding : 15px; 
	max-width : 490px; 
	max-height: 150px; 
	width : 490px; height: 150px; 
	font-size : 24px; 
	color : #888888;}
	
.postCommentButton{width : 120px; height : 50px; margin-left : 400px; margin-top: 30px;}

.clear {
	clear: both;
}